<template>
  <div class="fans">
    <div class="tab">
      <div class="tabitem" :class="[tabindex==1?'tabactive':'']" @click="tab(1)">
        粉丝概况
        <div v-if="tabindex==1" class="dixian"></div>
      </div>
      <div class="tabitem" :class="[tabindex==2?'tabactive':'']" @click="tab(2)">
        粉丝列表
        <div v-if="tabindex==2" class="dixian"></div>
      </div>
    </div>
    <!-- 粉丝概况 -->
    <div v-if="tabindex==1">
      <div class="sanbox">
        <div class="sanbox-item">
          <div class="sanbox-itembox">
            <div class="shang">
              <div class="left">
                <img style="margin-top: 15px;" src="../assets/fans/f1.png" alt />
              </div>
              <div class="bg">
                <div class="bg-zi">阅读量</div>
                <div class="bg-num">{{qita.all_folcount}}</div>
              </div>
            </div>
            <div class="xia">阅读量{{qita.all_folcount}}</div>
          </div>
        </div>
        <div class="sanbox-item">
          <div class="sanbox-itembox" style="background:#F57974;">
            <div class="shang">
              <div class="left">
                <img style="margin-top: 15px;" src="../assets/fans/f2.png" alt />
              </div>
              <div class="bg">
                <div class="bg-zi">粉丝月度累计阅读数</div>
                <div class="bg-num">{{qita.month_folcount}}</div>
              </div>
            </div>
            <div class="xia">粉丝月度累计阅读数{{qita.month_folcount}}</div>
          </div>
        </div>
        <div class="sanbox-item">
          <div class="sanbox-itembox" style="background:#44D087">
            <div class="shang">
              <div class="left">
                <img style="margin-top: 15px;" src="../assets/fans/f3.png" alt />
              </div>
              <div class="bg">
                <div class="bg-zi">月度粉丝收益</div>
                <div class="bg-num">{{qita.gold_folcount}}</div>
              </div>
            </div>
            <div class="xia">月度粉丝收益{{qita.gold_folcount}}</div>
          </div>
        </div>
      </div>

      <div class="zhexian">
        <div class="shaixuanbox">
          <div
            class="shaixuanbox-item"
            :class="[status==1?'shaixuanbox-item-a':'']"
            @click="gaistatus(1)"
          >新增粉丝</div>
          <div
            class="shaixuanbox-item"
            :class="[status==2?'shaixuanbox-item-a':'']"
            @click="gaistatus(2)"
          >取消关注</div>

          <div
            class="shaixuanbox-item"
            :class="[status==3?'shaixuanbox-item-a':'']"
            @click="gaistatus(3)"
          >累计粉丝</div>
        </div>
        <div class="timeselect">
          <div class="timeleft">
            <div class="timezi">时间</div>
            <div class="timeitem" :class="[select_t==0?'timeitem_s':'']" @click="selecttime(0)">7天</div>
            <div class="timeitem" :class="[select_t==1?'timeitem_s':'']" @click="selecttime(1)">14天</div>
            <div class="timeitem" :class="[select_t==2?'timeitem_s':'']" @click="selecttime(2)">30天</div>
          </div>
          <div class="timeright">
            <div class="timezi" style="margin-right:34px;">起止时间:</div>

            <el-date-picker
              v-model="value1"
              type="daterange"
              range-separator="至"
              value-format="yyyy-MM-dd"
              @change="xuanriqi"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
            <!-- <div class="boxtcj">
              <el-date-picker v-model="value1" type="date" placeholder="选择日期"></el-date-picker>
            </div>
            <div class="hengtcj">-</div>
            <div class="boxtcj">
              <el-date-picker v-model="value2" type="date" placeholder="选择日期"></el-date-picker>
            </div>-->
          </div>
        </div>

        <div id="echarts"></div>
      </div>
    </div>
    <!-- 粉丝列表 -->
    <div class="heimingdan" v-if="tabindex==2">
      <div class="heimingdanitem" v-for="(item,index) in list" :key="index">
        <div class="heimingdanitem-left">
          <img :src="item.avatar" alt />
          <div class="heimingdanitem-lright">
            <div class="heimingdanname">{{item.nickname}}</div>
            <div>{{item.autograph}}</div>
          </div>
        </div>
        <div class="heimingdanitem-right" v-if="item.is_blacks==0" @click="jiaru(item.id)">加入黑名单</div>
        <div class="heimingdanitem-right" v-if="item.is_blacks==1" @click="yichu(item.id)">从黑名单中移除</div>
      </div>

      <img v-if="list.length==0" class="juzhong" src="../assets/tixian/t5.png" alt />
    </div>
  </div>
</template>

<script>

// 引入基本模板
let echarts = require('echarts/lib/echarts')
// 引入柱状图组件
require('echarts/lib/chart/bar')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
require("echarts/lib/chart/line")


export default {
  name: "fans",
  data() {
    return {
      // key: value

      value1: "",
      // value2: '',
      tabindex: 1,
      status: 1,
      select_t: 0,
      data: [
        ["2000-06-05", 800],
        ["2000-06-06", 129],
        ["2000-06-07", 135],
        ["2000-06-08", 86],
        ["2000-06-09", 73],
        ["2000-06-10", 85],
        ["2000-06-11", 73],
        ["2000-06-12", 68],
        ["2000-06-13", 92],
        ["2000-06-14", 130]
      ],
      list: "",
      qita:""
    };
  },
  mounted() {
    if(!localStorage.getItem('uqid')){
      this.$router.push({ path: "/login", query: {  } });
      return
    }
    this.getall();
    // this.setbiao();
  },
  methods: {
    jiaru(id) {
      this.$axios({
        method: "post",
        url: "media/descs/fans_black",
        data: this.$qs.stringify({
          uqid: localStorage.getItem("uqid"),
          bid: id
        }),
        headers: {
          "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8"
        }
      }).then(response => {
        console.log(response);
        if (response.data.error == "0") {
          this.$message({
            showClose: true,
            message: "已经加入黑名单",
            type: "success"
          });
          this.getfanslist();
        } else {
          this.$message({
            showClose: true,
            message: response.data.message,
            type: "error"
          });
        }
      });
    },
    yichu(id) {
      this.$axios({
        method: "post",
        url: "media/descs/del_black",
        data: this.$qs.stringify({
          uqid: localStorage.getItem("uqid"),
          bid: id
        }),
        headers: {
          "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8"
        }
      }).then(response => {
        console.log(response);
        if (response.data.error == "0") {
          this.$message({
            showClose: true,
            message: "已经从黑名单移除",
            type: "success"
          });

          this.getfanslist();
        } else {
          this.$message({
            showClose: true,
            message: response.data.message,
            type: "error"
          });
        }
      });
    },

    setbiao() {
      var myChart = echarts.init(document.getElementById("echarts"));
      var data = this.data;
      var option;
      myChart.setOption(
        (option = {
          title: {
            // text: 'Beijing AQI'
          },
          tooltip: {
            trigger: "axis"
          },
          xAxis: {
            data: data.map(function(item) {
              return item[0];
            })
          },
          yAxis: {
            splitLine: {
              show: false
            }
          },
          // toolbox: {
          //     left: 'center',
          //     feature: {
          //         // dataZoom: {
          //         //     yAxisIndex: 'none'
          //         // },
          //         // restore: {},
          //         // saveAsImage: {}
          //     }
          // },
          dataZoom: [
            {
              startValue: "2014-06-05"
            },
            {
              type: "inside"
            }
          ],
          visualMap: {
            show: false,
            bottom: 0,
            right: -30,
            pieces: [
              {
                gt: 0,
                lte: 50,
                color: "#096"
              },
              {
                gt: 50,
                lte: 100,
                color: "#ffde33"
              },
              {
                gt: 100,
                lte: 150,
                color: "#ff9933"
              },
              {
                gt: 150,
                lte: 200,
                color: "#cc0033"
              },
              {
                gt: 200,
                lte: 300,
                color: "#660099"
              },
              {
                gt: 300,
                color: "#7e0023"
              }
            ],
            outOfRange: {
              color: "#999"
            }
          },
          series: {
            name: "粉丝数量",
            type: "line",
            data: data.map(function(item) {
              return item[1];
            }),
            markLine: {
              silent: true,
              data: [
                {
                  yAxis: 50
                },
                {
                  yAxis: 100
                },
                {
                  yAxis: 150
                },
                {
                  yAxis: 200
                },
                {
                  yAxis: 300
                }
              ]
            }
          }
        })
      );
    },

    selecttime(index) {
      this.select_t = index;
      this.value1 = "";
      this.getall();
    },

    gaistatus(index) {
      this.status = index;
      this.getall();
    },

    tab(index) {
      this.tabindex = index;
      if (index == 2) {
        this.$store.state.mianbaoxie = ["乐讯号", "我的粉丝", "粉丝列表"];
        this.getfanslist();
      }
      if (index == 1) {
        this.$store.state.mianbaoxie = ["乐讯号", "我的粉丝", "粉丝概况"];
        this.getall();
      }
    },
    getfanslist() {
      // media/descs/fans_list

      this.$get(
        // method: "get",
        "media/descs/fans_list",
        {
          uqid: localStorage.getItem("uqid"),
          limit: 1000,
          page: 1
          //   状态1新增2取消3累计
        }
      ).then(response => {
        console.log(response);
        if (response.error == "0") {
          //   this.setbiao();
          this.list = response.data;
        } else {
          this.$message({
            showClose: true,
            message: response.data.message,
            type: "error"
          });
        }
      });
    },

    xuanriqi() {
      console.log("1");

      this.select_t = "-1";
      this.getall();
    },

    getall() {
      var start, end;
      if (this.select_t == "-1") {
        start = this.value1[0];
        end = this.value1[1];
      } else {
        var timestamp = new Date().getTime();

        var endstr = new Date(timestamp);
        var year = endstr.getFullYear();
        var month = endstr.getMonth() + 1;
        var date = endstr.getDate();

        if (month < 10) {
          month = "0" + month;
        }
        if (date < 10) {
          date = "0" + date;
        }

        // .format("yyyy-MM-dd");
        end = year + "-" + month + "-" + date;

        if (this.select_t == 0) {
          var startstr = new Date(timestamp - 24 * 3600 * 1000 * 7);
          var year1 = startstr.getFullYear();
          var month1 = startstr.getMonth() + 1;
          var date1 = startstr.getDate();

          // .format("yyyy-MM-dd");
        }
        if (this.select_t == 1) {
          var startstr = new Date(timestamp - 24 * 3600 * 1000 * 14);
          var year1 = startstr.getFullYear();
          var month1 = startstr.getMonth() + 1;
          var date1 = startstr.getDate();

          // .format("yyyy-MM-dd");
        }
        if (this.select_t == 2) {
          var startstr = new Date(timestamp - 24 * 3600 * 1000 * 30);
          var year1 = startstr.getFullYear();
          var month1 = startstr.getMonth() + 1;
          var date1 = startstr.getDate();
          // .format("yyyy-MM-dd");
        }
        if (month1 < 10) {
          month1 = "0" + month1;
        }
        if (date1 < 10) {
          date1 = "0" + date1;
        }
        start = year1 + "-" + month1 + "-" + date1;
      }

      console.log(start, end);
      this.$get(
        // method: "get",
        "media/descs/fans_desc",
        {
          uqid: localStorage.getItem("uqid"),
          start: start,
          end: end,
          status: this.status
          //   状态1新增2取消3累计
        }
      ).then(response => {
        console.log(response.data.chart);
        if (response.error == "0") {
          this.data = response.data.chart;

          this.qita=response.data
          this.setbiao();
        } else {
          this.$message({
            showClose: true,
            message: response.data.message,
            type: "error"
          });
        }
      });
    }
  }
};
</script>

<style  scoped>
.fans::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}

.tab {
  height: 70px;
  display: flex;
  align-items: center;
  justify-self: start;
  padding-left: 9px;
  width: 100%;
  box-sizing: border-box;
}
.tab .tabitem {
  padding: 0 9px;
  font-family: PingFang SC;
  font-size: 16px;
  line-height: 22px;
  color: rgba(172, 172, 172, 1);
  position: relative;
  height: 28px;
   font-weight: 550;
}

.tabactive {
 
  color: rgba(51, 51, 51, 1) !important;
}

.dixian {
  width: 34px;
  height: 3px;
  background: rgba(38, 106, 255, 1);
  opacity: 1;
  /* margin-top:3px; */
  margin: 3px auto 0;
}
.sanbox {
  width: 100%;
  margin-top: 9px;
  padding: 0 0 0 19px;
  box-sizing: border-box;
  display: flex;
}
.sanbox-item {
  width: 33.333%;
  height: 150px;
  padding-right: 24px;
  box-sizing: border-box;
}
.sanbox-item > div {
  height: 150px;
  width: 100%;
  background: #6171fc;
  opacity: 1;
  border-radius: 20px;
}

.fans {
  width: 100%;
  height: calc(100% - 118px);
  overflow-y: scroll;
  overflow-x: hidden;

  background: rgba(255, 255, 255, 1);
}
.fans::-webkit-scrollbar {
  display: none;
}
.sanbox-itembox {
  display: flex;
  flex-direction: column;
}
.shang {
  width: 100%;
  height: 106px;
  /* display: flex; */
  position: relative;
}
.left {
  width: 28%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  /* align-items: center; */
  flex-direction: column;
  text-align: center;
}
.bg-zi {
  font-size: 14px;
  font-weight: 550;
  line-height: 20px;
  color: rgba(255, 255, 255, 1);
  margin-top: 15px;
}

.bg-num {
  font-size: 22px;
  font-weight: 550;
  line-height: 30px;
  color: rgba(255, 255, 255, 1);
  margin-top: 10px;
}

.xia {
  width: 100%;
  height: 44px;
  background: rgba(255, 255, 255, 0.32);
  text-indent: 20px;
  line-height: 44px;

  font-size: 14px;
  color: rgba(255, 255, 255, 1);
}
.shaixuanbox {
  padding-left: 19px;
  margin-top: 27px;
  display: flex;
}
.shaixuanbox-item {
  width: 70px;
  height: 28px;

  border-radius: 6px;
  margin-right: 27px;
  font-size: 14px;
  text-align: center;
  line-height: 28px;
  color: rgba(172, 172, 172, 1);
}
.shaixuanbox-item-a {
  background: rgba(38, 106, 255, 1);
  color: rgba(255, 255, 255, 1);
}
.timeselect {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 19px;
  margin-top: 26px;
}
.timeleft,
.timeright {
  display: flex;
  align-items: center;
}

.timeright {
}

.timezi {
  font-size: 14px;
  font-weight: 550;
  line-height: 20px;
  color: rgba(51, 51, 51, 1);
  margin-right: 13px;
}
.timeitem {
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
  margin-right: 13px;
}
.timeitem_s {
  color: rgba(38, 106, 255, 1);
}
.boxtcj {
  width: 174px;
  height: 37px;
  background: rgba(255, 255, 255, 1);
  /* border:1px solid rgba(231,237,252,1); */
  opacity: 1;
}
.hengtcj {
  margin: 0 8px;
}

#echarts {
  width: 989px;
  height: 328px;
  margin: 57px auto 0;
}
/* .粉丝列表 */
.heimingdan {
  max-height: calc(100% - 28px);
  width: 100%;
  margin-top: 4px;
  overflow-y: scroll;
  padding-left: 20px;
  padding-right: 11px;
  box-sizing: border-box;
  position: relative;
}
.heimingdan::-webkit-scrollbar {
  display: none;
}
.heimingdanitem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(231, 237, 252, 1);
  height: 117px;
}
.heimingdanitem-left {
  display: flex;
  align-items: center;
}
.heimingdanitem-left > img {
  width: 60px;
  height: 60px;
  background: rgba(0, 0, 0, 1);
  border-radius: 50%;
  opacity: 1;
  margin-left: 25px;
  margin-right: 22px;
}
.heimingdanitem-lright {
  font-size: 12px;
  font-weight: 400;
  line-height: 17px;
  color: rgba(48, 49, 51, 1);
  opacity: 1;
}
.heimingdanname {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: rgba(48, 49, 51, 1);
  opacity: 1;
  margin-bottom: 9px;
}
.heimingdanitem-right {
  width: 103px;
  height: 38px;
  border: 1px solid rgba(172, 172, 172, 1);
  opacity: 1;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 400;
  line-height: 38px;
  color: rgba(172, 172, 172, 1);
  text-align: center;
  margin-right: 13px;
}
.juzhong {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>
<style>
.el-date-editor.el-input {
  width: 100%;
}

.el-icon-date:before {
  content: "";
  display: block;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../assets/fans/f4.png);
}
</style>